<script setup>
import topNav from "../../components/topNav.vue";
import { introApi } from "@/services/index";
import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app";
import { nextTick, ref, watch, onMounted } from "vue";
import { appInfo, loginSwitch } from "@/services/user";
// import topNav from "../../components/topNav.vue";
import { operation } from "@/utils/num.js";
import {
  appScTransferSource,
  appShopSelector,
  StorePurchaseQuery,
} from "@/services/transfer";
// appShopSelectorAll,
const topHeight = ref(uni.getStorageSync("topHight") || 0);
const selectType = ref(1);
const isTime = ref(false);
const isType = ref(false);
const keyword = ref("");
const form = ref({
  pageIndex: 1,
  pageSize: 20,
  sourceShopId: "",
  keyword: "",
  status: "",
});
const userObj = ref({});
const options1 = ref([]);
const options2 = ref([]);
const options4 = ref([
  { label: "已取消", value: "6" },
  { label: "待签收", value: "3" },
  { label: "已签收", value: "12" },
]);
const openDropdown = ref(false);
onReachBottom(() => {
  console.log("触底了");
  getAppProductQuery();
});

onLoad((options) => {
  getAppProductQuery();
  if (uni.getStorageSync("user")) {
    userObj.value = JSON.parse(uni.getStorageSync("user"));
  }
  options1.value = [userObj.value];
  // getAppShopSelector();
});

// 门店选择
// const getAppShopSelector = async () => {
//   let res = await appShopSelectorAll({});
//   options2.value = res.data.datas;
// };

const productData = ref([]);

const loading = ref("");
const getAppProductQuery = async (index) => {
  console.log("index", index);
  if (index == 1) {
    productData.value = [];
    loading.value = "";
  }
  if (index) {
    form.value.pageIndex = index;
  }
  if (loading.value == "noMore") {
    return;
  }
  loading.value = "Loading";
  try {
    let res = await StorePurchaseQuery(form.value);
    if (res.code == 200) {
      console.log(res);
      productData.value = productData.value.concat(res.data.datas);
      console.log(productData.value);
      form.value.pageIndex = form.value.pageIndex + 1;

      if (res.data.datas.length < form.value.pageSize) {
        loading.value = "noMore";
      } else {
        loading.value = "More";
      }
    } else {
    }

    console.log(res);
  } catch (e) {}
};
const select_one = ref("");
const select_two = ref("");
const select_three = ref("");
const select_from = ref("");

const uDropdownRef = ref(null);
function clerselect() {
  form.value.targetShopId = "";
  form.value.status = "";
  select_one.value = "";
  select_two.value = "";
  select_three.value = "";
  select_from.value = "";
}
const closeDropdown = () => {
  uDropdownRef.value.close();
};

const onSelectOne = (item) => {
  clerselect();
  uDropdownRef.value.close();
  select_one.value = item.shopId;
};
const onSelectTwo = (item) => {
  console.log("item", item);
  clerselect();
  uDropdownRef.value.close();
  select_two.value = item.id;
  form.value.sourceShopId = item.id;

  getAppProductQuery(1);
};

const onSelectForm = (item) => {
  clerselect();
  uDropdownRef.value.close();
  select_from.value = item.value;
  form.value.status = item.value;
  getAppProductQuery(1);
};

const onDetail = (item) => {
  console.log(item);
  uni.navigateTo({
    url: "/pages/self_store/record_det/index?id=" + item.id,
  });
};
const isshowpr = ref(false);
const openfun = () => {
  if (isshowpr.value) {
    return;
  }
  if (openDropdown.value == false) {
    openDropdown.value = true;
  }
};
const closefun = () => {
  if (isshowpr.value) {
    return;
  }
  isshowpr.value = true;
  openDropdown.value = false;
  isshowpr.value = false;
};
const searchFun = () => {
  getAppProductQuery(1);
};
const ChangeFun = () => {
  form.value.sourceShopId = "";
  form.value.status = "";
  clerselect();
};

//时间选择
const showShop = ref(false);
const showtime = ref(false);
const showEndTime = ref(false);
const datetimePickerRef = ref(null);
const timevalue = ref(Time(Date.now()));
const timevalueTwo = ref(Time(Date.now()));
const minTime = ref("");
const selectDateIndex = ref(0);

const selectDate = (index) => {
  selectDateIndex.value = index;
  if (selectDateIndex.value == 1) {
    showtime.value = true;
  }
  if (selectDateIndex.value == 2) {
    showEndTime.value = true;
  }
  // showShop.value = false;
};

const confirmDate = (E) => {
  minTime.value = Time(E.value);
  timevalue.value = Time(E.value);
  timevalueTwo.value = Time(Date.now(timevalue.value));

  showtime.value = false;
  showEndTime.value = true;
};
const confirmDateTwo = (E) => {
  timevalueTwo.value = Time(E.value);
  showEndTime.value = false;
  selectDateIndex.value == 2;
  showShop.value = true;
};
function Time(e) {
  const date = new Date(e);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
}

const selectShop = (item, index) => {
  form.value.scId = item.id;
};

const searchlistfun = () => {
  form.value.keyword = keyword.value;
  getAppProductQuery(1);
};

const selectTM = () => {
  // showShop.value = true;
  // selectType.value = 2;

  if (selectType.value != 2 && showShop.value == true) {
  } else {
    showShop.value = !showShop.value;
  }
  if (!showShop.value) {
    selectType.value = 0;
  } else {
    selectType.value = 2;
  }
  // selectDateIndex.value = 0;
};
const cancel = () => {
  // let num = 0;
  showShop.value = false;
  selectDateIndex.value = 0;
  selectType.value = 0;
  form.value.scId = "";
  getAppProductQuery(1);

  // if (selectDataList.value.length > 0) {
  //   introData.value.forEach((item2) => {
  //     item2.select = false;
  //   });

  //   selectDataList.value.forEach((item) => {
  //     introData.value.forEach((item2) => {
  //       if (item2.shopId == item.shopId) {
  //         item2.select = true;
  //         num++;
  //       }
  //     });
  //   });
  //   selectShopNum.value = num;
  // }
};
const qrFun = () => {
  if (selectDateIndex.value > 0) {
    form.value.createStartTime = timevalue.value + " 00:00:00";
    form.value.createEndTime = timevalueTwo.value + " 23:59:59";
  } else {
    form.value.createStartTime = "";
    form.value.createEndTime = "";
  }
  showShop.value = false;

  getAppProductQuery(1);
};

//无网状态
const connected = () => {
  getAppProductQuery();

  getAppShopSelector();
};
</script>

<template>
  <view class="bg">
    <topNav
      :title="'自采入库记录'"
      @save="saveFun"
      :border="true"
      rType="save"
    ></topNav>
    <view
      v-if="!showShop"
      class="pay-top"
      :style="'top: calc( 88rpx + ' + topHeight + 'px);'"
    >
      <view class="pay-search">
        <view class="pay-search-left">
          <up-search
            style="height: 60rpx"
            placeholder="单据编号/经手人"
            v-model="keyword"
            @search="searchlistfun"
            :showAction="false"
            shape="square"
          ></up-search>
        </view>
        <view
          class="pay-search-right"
          @click="selectCk"
          v-if="showSelect == 'admin'"
        >
          <text :class="selectType == 1 ? 'play-color' : ''">仓库</text>
          <up-icon
            class="play-right-fill"
            name="play-right-fill"
            :class="selectType == 1 ? 'play-right-fill-rad' : ''"
            :color="selectType == 1 ? '#1679fb' : '#c9cdd4'"
            size="24rpx"
          ></up-icon>
        </view>
        <view class="pay-search-right" @click="selectTM">
          <text :class="selectType == 2 ? 'play-color' : ''">时间</text>
          <up-icon
            class="play-right-fill"
            name="play-right-fill"
            :class="selectType == 2 ? 'play-right-fill-rad' : ''"
            :color="selectType == 2 ? '#1679fb' : '#c9cdd4'"
            size="24rpx"
          ></up-icon>
        </view>
      </view>
    </view>

    <!-- :style="'z-index:' + (openDropdown ? 0 : 10) + ';'" -->
    <view class="content">
      <view
        class="content-item"
        v-for="(item, index) in productData"
        :key="index"
        @click="onDetail(item)"
      >
        <view class="content-title"
          ><text>单据编号：{{ item.id }}</text></view
        >
        <view class="content-info">
          <view class="content-info-left">
            <view class="content-time"
              ><text>操作时间：{{ item.createTime }}</text>
              <text style="margin-left: 20rpx">
                {{ item.purchaserName }}</text
              ></view
            >
          </view>
          <view class="content-info-right">
            <view class="content-info-right-item" v-if="item.totalNum > 0"
              >{{ item.totalNum }}件</view
            >
            <!-- <view class="content-info-right-text">{{ item.totalNum }}件</view> -->
          </view>
        </view>
      </view>

      <view
        class="noData"
        v-if="productData.length <= 0 && loading == 'noMore'"
      >
        <view class="noData-img">
          <image src="@/static/nodate/datas.png" mode="scaleToFill" />
          <view>暂无商品 </view>
        </view>
      </view>
      <view class="loading-form" v-if="loading && productData.length > 0"
        ><van-loading size="24rpx" v-if="loading == 'Loading'"
          ><text class="loading-text">加载中...</text>
        </van-loading>
        <text class="loading-text" v-if="loading == 'More'">加载更多</text>
        <text class="loading-text" v-if="loading == 'noMore'"
          >~没有数据了~</text
        >
      </view>
    </view>
  </view>

  <!-- 筛选 -->
  <up-popup
    :show="showShop"
    mode="top"
    @close="showShop = false"
    round="15"
    :safeAreaInsetTop="true"
  >
    <view class="popup">
      <view class="pay-top" :style="'top: calc( 88rpx + ' + topHeight + 'px);'">
        <view class="pay-search">
          <view class="pay-search-left">
            <up-search
              style="height: 60rpx"
              placeholder="单据编号/经手人"
              v-model="keyword"
              @search="searchlistfun"
              :showAction="false"
              shape="square"
            ></up-search>
          </view>
          <view
            class="pay-search-right"
            @click="selectCk"
            v-if="showSelect == 'admin'"
          >
            <text :class="selectType == 1 ? 'play-color' : ''">仓库</text>
            <up-icon
              class="play-right-fill"
              name="play-right-fill"
              :class="selectType == 1 ? 'play-right-fill-rad' : ''"
              :color="selectType == 1 ? '#1679fb' : '#c9cdd4'"
              size="24rpx"
            ></up-icon>
          </view>
          <view class="pay-search-right" @click="selectTM">
            <text :class="selectType == 2 ? 'play-color' : ''">时间</text>
            <up-icon
              class="play-right-fill"
              name="play-right-fill"
              :class="selectType == 2 ? 'play-right-fill-rad' : ''"
              :color="selectType == 2 ? '#1679fb' : '#c9cdd4'"
              size="24rpx"
            ></up-icon>
          </view>
        </view>
      </view>
      <scroll-view
        :scroll-top="0"
        scroll-y="true"
        class="scroll-Y"
        @scrolltoupper="upper"
        v-if="selectType == 1"
      >
        <view
          class="popup_item"
          v-for="(item, index) in storeCenter"
          :key="index"
          @click="selectShop(item, index)"
        >
          <view class="popup_item_left"
            ><text></text> <text>{{ item.name }}</text>
          </view>

          <view class="popup_item_right" v-if="form.scId == item.id">
            <up-icon
              name="checkbox-mark"
              color="#1679fb"
              size="42rpx"
            ></up-icon>

            <!-- <view class="popup_item_right_o"></view>
            <image src="@/static/manage/select.png" mode="scaleToFill" /> -->
          </view>
        </view>
      </scroll-view>

      <view class="select_Time" v-if="selectType == 2">
        <view class="select_Time-item">
          <view
            class="select_Time-item_left"
            :class="selectDateIndex == 1 ? 'select_Time-item_left-top' : ''"
            @click="selectDate(1)"
            >{{ timevalue }}</view
          >
          <text>至</text>
          <view
            class="select_Time-item_left"
            :class="selectDateIndex == 2 ? 'select_Time-item_left-top' : ''"
            @click="selectDate(2)"
            >{{ timevalueTwo }}</view
          >
        </view>
      </view>

      <view style="width: 100%; height: 30rpx"></view>

      <view class="popup_bt">
        <view class="popup_bt_qx" @click="cancel">取消</view>
        <view class="popup_bt_qr" @click="qrFun">确认</view>
      </view>
    </view>
  </up-popup>
  <noWork @connected="connected"> </noWork>
</template>

<style lang="scss" scoped>
@import "index.scss";
</style>
